<html>
<h2>Danh mục Sản phẩm</h2>
<p id="page-intro">Danh sách danh mục sản phẩm trên website</p>
<div class="clear"></div>
<div class="content-box">
    <div class="content-box-header">
        <h3>Danh mục Sản phẩm</h3>
    </div>
    <div class="content-box-content">
        <form action="javascript:void(0);">
            <table class="medium-table">
                <thead>
                    <tr>
                        <th class="left w5"><input class="check-all" type="checkbox" /></th>
                        <th class="w5">ID</th>
                        <th class="left">Tên Danh mục</th>
                        <th class="w15">Trạng thái</th>
                        <th class="w20">Hiển thị</th>
                        <th class="w15">Thao tác</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Trang Sức Nam -->
                    <tr>
                        <td><input type="checkbox" name="cat[1]" id="cat1" value="1" /> </td>
                        <td class="center">1</td>
                        <td class="editable"><h6><a class="edit" href="#" title="Trang Sức Nam"><span>Trang Sức Nam</span></a></h6></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[1]" value="1" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[4]" id="subcat4_cat1" value="4" /> </td>
                        <td class="center">4</td>
                        <td class="editable"><a class="edit" href="#" title="Khuyên Tai Nam">&#8212; <span>Khuyên Tai Nam</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[4]" value="1" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[5]" id="subcat5_cat1" value="5" /> </td>
                        <td class="center">5</td>
                        <td class="editable"><a class="edit" href="#" title="Lắc Nam">&#8212; <span>Lắc Nam</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[5]" value="2" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[6]" id="subcat6_cat1" value="6" /> </td>
                        <td class="center">6</td>
                        <td class="editable"><a class="edit" href="#" title="Nhẫn Nam">&#8212; <span>Nhẫn Nam</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[6]" value="3" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[7]" id="subcat7_cat1" value="7" /> </td>
                        <td class="center">7</td>
                        <td class="editable"><a class="edit" href="#" title="Mặt Dây Nam">&#8212; <span>Mặt Dây Nam</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[7]" value="4" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <!-- / Trang Sức Nam -->

                    <!-- Trang Sức Nữ -->
                    <tr>
                        <td><input type="checkbox" name="cat[2]" id="cat2" value="2" /> </td>
                        <td class="center">2</td>
                        <td class="editable"><h6><a class="edit" href="#" title="Trang Sức Nữ"><span>Trang Sức Nữ</span></a></h6></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[2]" value="2" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[8]" id="subcat8_cat2" value="8" /> </td>
                        <td class="center">8</td>
                        <td class="editable"><a class="edit" href="#" title="Khuyên Tai Nữ">&#8212; <span>Khuyên Tai Nữ</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[8]" value="1" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[9]" id="subcat9_cat2" value="9" /> </td>
                        <td class="center">9</td>
                        <td class="editable"><a class="edit" href="#" title="Lắc Nữ">&#8212; <span>Lắc Nữ</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[9]" value="2" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[10]" id="subcat10_cat2" value="10" /> </td>
                        <td class="center">10</td>
                        <td class="editable"><a class="edit" href="#" title="Nhẫn Nữ">&#8212; <span>Nhẫn Nữ</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/cross_circle.png" alt="Disable" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[10]" value="3" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <tr>
                        <td><input type="checkbox" name="cat[11]" id="subcat11_cat2" value="11" /> </td>
                        <td class="center">11</td>
                        <td class="editable"><a class="edit" href="#" title="Mặt Dây Nữ">&#8212; <span>Mặt Dây Nữ</span></a></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[11]" value="4" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <!-- / Trang Sức Nữ -->

                    <!-- Trang Sức đôi -->
                    <tr>
                        <td><input type="checkbox" name="cat[3]" id="cat3" value="3" /> </td>
                        <td class="center">3</td>
                        <td class="editable"><h6><a class="edit" href="#" title="Trang Sức Nữ"><span>Trang Sức đôi</span></a></h6></td>
                        <td class="center"><img class="clickable" src="images/icons/tick_circle.png" alt="Active" /></td>
                        <td class="center"><input class="text-input small-input" type="text" name="displayOrder[3]" value="1" /></td>
                        <td class="center">
                            <a href="#" class="edit" title="Sửa"><img src="images/icons/pencil.png" alt="Sửa" /></a>
                            <a href="#" class="delete" title="Xoá"><img src="images/icons/cross.png" alt="Xoá" /></a>
                        </td>
                    </tr>
                    <!-- / Trang Sức đôi -->

                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5">
                        <div class="bulk-actions align-left">Với các hàng được chọn:
                            <a href="#" class="alt btn" rel="delete">Xoá</a>
                            <a href="#" class="alt btn" rel="display">Cập nhật hiển thị</a>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        //Tạo event click check all checkbox
        $('.check-all').click(function(){
                    $(this).parent().parent().parent().parent()
                            .find("input[type='checkbox']")
                            .attr('checked', $(this).is(':checked'));
        });
        //Đổi màu các hàng chẵn
        $('tbody tr:even').addClass("alt-row");
        //Tạo event click cho các link Xoá danh mục
        $('a.delete').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $(this).parent().parent().find("input[type='checkbox']").each(function(){
                   removeRow(this);
                });
            }
            return false;
        });
        $('a.edit').click(function(){
            window.location.href = 'index.html#edit_cat';
            jewelryCP.loadItem('edit_cat', $("#main-nav li a.nav-top-item.current"));
            return false;
        });
        //Tạo event click cho nút Xoá
        $('a[rel="delete"]').click(function(){
            if(confirm("Bạn muốn xoá?")){
                $('table').find("input[type='checkbox']:checked").each(function(){
                    if(this.className!='check-all'){
                        removeRow(this);
                    }
                });
            }
            return false;
        });
        //Chức năng Edit in line
        $("td.editable").bind('dblclick',function(){
            if($(this).find('input').length==0){
                var hasHeading = $(this).find('h6').length==1;
                var jSpan = $(this).find('span');
                var oldText = jSpan.text();
                var jAnchor = jSpan.parent();
                jAnchor.parent().html('<input type="text" class="text-input medium-input" value="'+ oldText + '" />')
                       .find('input').bind('blur', function(){
                            replaceNewText(this,jAnchor,hasHeading,'');
                       })
                       .bind('keyup', function(e){
                            if(e.keyCode==13 || e.keyCode==27){
                                replaceNewText(this,jAnchor,hasHeading,(e.keyCode==13 ? '': oldText));
                            }
                        }).focus();
            }
        });
        $('img.clickable').click(function(){
            if(this.alt=='Active'){
                $(this).attr('src','images/icons/cross_circle.png').attr('alt','Disable');
            } else {
                $(this).attr('src','images/icons/tick_circle.png').attr('alt','Active');
            }
        }).css('cursor','pointer');
    });
    function replaceNewText(obj, jAnchor, hasHeading, oldText){
        var text = oldText=='' ? $(obj).val(): oldText;
        $(obj).parent().html(jAnchor.html((hasHeading ? '' : '&#8212; ') + '<span>' + text + '</span>').attr('title',text));
    }
    //Hàm xoá 1 hàng
    function removeRow(obj){
        $(obj).parent().parent().fadeOut('slow',function(){
            $(this).remove();
        });
        if(obj.id){
            $(obj).parent().parent().parent()
                    .find('input[id$="_' + obj.id + '"]').each(function(){
                        $(this).parent().parent().remove();
                    });
        }
    }
</script>
</html>